<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DAY SEVEN</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script type="module" src="main.js"></script>
</head>
<body>
    <div class="frame">
        <div class="panel">
            <div class="header">
                <div class="menu-icon">
                    <div class="dash-top"></div>
                    <div class="dash-bottom"></div>
                    <div class="circle"></div>
                </div>
                <span class="title">Notifications</span>
                <input type="text" class="search-input" placeholder="Search ...">
                <div class="fa fa-search search-icon"></div>
            </div>

            <div class="notifications">
                <div class="line"></div>
                <div class="notification">
                    <div class="circle"></div>
                    <span class="time">9.24 AM</span>
                    <p><b>John Walker</b> posted a phone on your wall.</p>
                </div>
                <div class="notification">
                    <div class="circle"></div>
                    <span class="time">8:19 AM</span>
                    <p><b>Alice Parker</b> commented your last post.</p>
                </div>
                <div class="notification">
                    <div class="circle"></div>
                    <span class="time">Yesterday</span>
                    <p><b>Luke Wayne</b> added you as friend</p>
                </div>
            </div>
        </div>
        <div class="menu">
            <ul>
                <li><span class="fa fa-dashboard"> Dashboard</span></li>
                <li><span class="fa fa-user"> Profile</span></li>
                <li><span class="fa fa-bell"> Notifications</span></li>
                <li><span class="fa fa-comments"> Messages</span></li>
                <li><span class="fa fa-gear"> Settings</span></li>
            </ul>
        </div>
    </div>
</body>
</html>